<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="bookList"
      border
      element-loading-text="Loading"
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="id" prop="id" width="95">
      </el-table-column>
      <el-table-column label="标题" prop="title">
      </el-table-column>
      <el-table-column align="center" label="数量" prop="count" width="110">
      </el-table-column>
      <el-table-column
        #default="{row, column, $index}"
        label="类别"
        width="width"
      >
        <el-tag v-for="(c, index) in row.category" style="margin: 0px 20px"
                type="success"
        >{{ c.value }}
        </el-tag>

      </el-table-column>
      <el-table-column align="center" label="书架位置" prop="bookshelfLocation" width="200">
      </el-table-column>
      <el-table-column
        #default="{row, column, $index}"
        label="操作"
        prop="prop"
      >
        <el-button icon="el-icon-edit" size="mini" type="warning" @click="updateBook($index)"></el-button>
        <el-button icon="el-icon-delete" size="mini" type="danger" @click="deleteBook($index)"></el-button>
        <el-button icon="el-icon-info" size="mini" type="info" @click="openInfo(row)"></el-button>
      </el-table-column>
    </el-table>
    <el-drawer
      :before-close="handleClose"
      :title="curTitle"
      :visible.sync="searchInfo">
      <span>{{ curBody }}</span>

    </el-drawer>

  </div>
</template>

<script>
import {getList} from '@/api/table'
import getters from "@/store/getters";
import {mapGetters} from "vuex";

export default {
  name: 'AllBook',
  data() {
    return {
      listLoading: true,
      searchInfo: false,
      curTitle: "",
      curBody: ""
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    openInfo(row) {
      this.searchInfo = true
      this.curTitle = row.title
      this.curBody = row.body
    },
    fetchData() {
      this.listLoading = true

      // getList().then(response => {
      //   this.bookList = response.data.items
      //   this.listLoading = false
      // })

      this.$store.dispatch('book/findAllBook')
      this.listLoading = false
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    deleteBook($index) {
      this.bookList.splice($index, 1)
      this.$message({type: 'success', message: "删除成功"})
    },
    updateBook($index) {
      this.$router.push({name: 'AddOrUpdateBook', params: {index: $index}})
    }
  },
  computed: {
    ...mapGetters(['bookList'])
  }
}
</script>


<style scoped>

</style>
